
import React from 'react';
import { Layout, Menu } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
import { useHistory, useLocation, Switch, Route, Redirect } from 'react-router-dom';
import Clientz from './Clientz';

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

function Client(props) {
  var history = useHistory();
  var location = useLocation()
  return (
    <div className="client">
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            defaultSelectedKeys={['location.pathname']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%', borderRight: 0 }}
            onClick={({ item, key, keyPath, domEvent }) => { history.push(key) }}
          >
            <div className="title">客户</div>
            <Menu.Item key="/client/Client">客户管理</Menu.Item>
            <SubMenu key="sub1" icon={<UserOutlined />} title="设置">
              <Menu.Item key="/client/1">客户信息</Menu.Item>
              <Menu.Item key="/client/2">客户标签</Menu.Item>
              <Menu.Item key="/client/3">VIP客户设置</Menu.Item>
              <Menu.Item key="/client/4">黑名单客户</Menu.Item>
              <Menu.Item key="/client/5">客户保存规则</Menu.Item>
              <Menu.Item key="/client/6">客户分配规则</Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Switch>
          <Route path="/client/client" exact component={Clientz}></Route>

          <Redirect from='/client' exact to="/client/client"></Redirect>
        </Switch>
      </Layout>
    </div>
  );
}

export default Client;
